<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>Cards Stacking with GSAP</title>
    <meta content="width=device-width, initial-scale=1" name="viewport" />

    <link href="main.css" rel="stylesheet" type="text/css" />
  </head>
  <body>
    <main class="main-wrapper">
      <div class="section">
        <div class="container-medium">
          <div class="padding-vertical">
            <div class="max-width-large">
              <h1 class="heading">But Vertical Scroll Is Also Cool!</h1>
            </div>
          </div>
        </div>
      </div>

      <div class="scroll-section vertical-section section">
        <div class="wrapper">
          <div role="list" class="list">
            <div role="listitem" class="item">
              <div class="item_content">
                <h2 class="item_number">1</h2>
                <h2>Wildlife in Action: A Glimpse into Nature’s Daily Drama</h2>
                <p class="item_p">
                  Witness the fascinating lives of animals in their natural
                  habitats, from playful cubs to stealthy predators.
                </p>
              </div>
              <video
                src="https://videos.pexels.com/video-files/4763824/4763824-uhd_2560_1440_24fps.mp4"
                loading="lazy"
                autoplay
                muted
                loop
                class="item_media"
              ></video>
            </div>
            <div role="listitem" class="item">
              <div class="item_content">
                <h2 class="item_number">2</h2>
                <h2>The Changing Seasons: Nature’s Everlasting Cycle</h2>
                <p class="item_p">
                  Experience the beauty of nature's transitions, from blooming
                  spring flowers to snowy winter landscapes.
                </p>
              </div>
              <video
                src="https://videos.pexels.com/video-files/3214448/3214448-uhd_2560_1440_25fps.mp4"
                loading="lazy"
                autoplay
                muted
                loop
                class="item_media"
              ></video>
            </div>
            <div role="listitem" class="item">
              <div class="item_content">
                <h2 class="item_number">3</h2>
                <h2>Guardians of Nature: Protecting Our Planet’s Future</h2>
                <p class="item_p">
                  Learn about the importance of conservation and how we can work
                  together to preserve the beauty of nature for generations to
                  come.
                </p>
              </div>
              <video
                src="https://videos.pexels.com/video-files/4328514/4328514-uhd_2560_1440_30fps.mp4"
                loading="lazy"
                autoplay
                muted
                loop
                class="item_media"
              ></video>
            </div>
            <div role="listitem" class="item">
              <div class="item_content">
                <h2 class="item_number">4</h2>
                <h2>Astral Aesthetics: Portraits from the Infinite</h2>
                <p class="item_p">
                  Experience the boundless beauty of the cosmos through striking
                  portraits that capture its infinite aesthetic appeal.
                </p>
              </div>
              <video
                src="https://videos.pexels.com/video-files/2871916/2871916-hd_1920_1080_30fps.mp4"
                loading="lazy"
                autoplay
                muted
                loop
                class="item_media"
              ></video>
            </div>
          </div>
        </div>
      </div>

      <div class="section">
        <div class="container-medium">
          <div class="padding-vertical">
            <div class="max-width-large">
              <h1 class="heading">Horizontal Scroll Is Cool!</h1>
            </div>
          </div>
        </div>
      </div>

      <div class="scroll-section horizontal-section section">
        <div class="wrapper">
          <div role="list" class="list">
            <div role="listitem" class="item">
              <div class="item_content">
                <h2 class="item_number">1</h2>
                <h2>Wildlife in Action: A Glimpse into Nature’s Daily Drama</h2>
                <p class="item_p">
                  Explore the untouched beauty of forests, mountains, and rivers
                  as we uncover the hidden secrets of nature's most breathtaking
                  landscapes.
                </p>
              </div>
              <video
                src="https://videos.pexels.com/video-files/10178127/10178127-uhd_2560_1440_30fps.mp4"
                loading="lazy"
                autoplay
                muted
                loop
                class="item_media"
              ></video>
            </div>
            <div role="listitem" class="item">
              <div class="item_content">
                <h2 class="item_number">2</h2>
                <h2>Nature’s Symphony: The Sounds That Heal the Soul</h2>
                <p class="item_p">
                  Immerse yourself in the soothing sounds of chirping birds,
                  rustling leaves, and flowing streams – nature's music for
                  peace and tranquility.
                </p>
              </div>
              <video
                src="https://videos.pexels.com/video-files/15708463/15708463-uhd_2560_1440_24fps.mp4"
                loading="lazy"
                autoplay
                muted
                loop
                class="item_media"
              ></video>
            </div>
            <div role="listitem" class="item">
              <div class="item_content">
                <h2 class="item_number">3</h2>
                <h2>
                  Nature’s Masterpieces: Landscapes That Take Your Breath Away
                </h2>
                <p class="item_p">
                  Discover stunning views of majestic mountains, endless oceans,
                  and golden sunsets that remind us of nature's artistic
                  brilliance.
                </p>
              </div>
              <video
                src="https://videos.pexels.com/video-files/15708462/15708462-uhd_2560_1440_24fps.mp4"
                loading="lazy"
                autoplay
                muted
                loop
                class="item_media"
              ></video>
            </div>
            <div role="listitem" class="item">
              <div class="item_content">
                <h2 class="item_number">4</h2>
                <h2>The Power of Nature: How It Shapes Our World</h2>
                <p class="item_p">
                  Dive into the incredible forces of nature – from roaring
                  waterfalls to mighty hurricanes – and see how they sculpt the
                  earth we live on.
                </p>
              </div>
              <video
                src="https://videos.pexels.com/video-files/5788966/5788966-hd_1920_1080_25fps.mp4"
                loading="lazy"
                autoplay
                muted
                loop
                class="item_media"
              ></video>
            </div>
          </div>
        </div>
      </div>

      <div class="section">
        <div class="padding-global">
          <div class="container-medium">
            <div class="padding-vertical">
              <div class="max-width-large">
                <h1 class="heading">Soo Cool!!</h1>
              </div>
            </div>
          </div>
        </div>
      </div>
    </main>

    <script src="https://cdn.jsdelivr.net/npm/gsap@3.12.5/dist/gsap.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/gsap@3.12.5/dist/ScrollTrigger.min.js"></script>
    <script src="main.js"></script>
  </body>
</html>
